<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://arborjslibs.googlecode.com/svn/trunk/arbor.js"></script>
        <script src="http://arborjslibs.googlecode.com/svn/trunk/graphics.js"></script>
        <script src="http://arborjslibs.googlecode.com/svn/trunk/renderer.js"></script>
    </head>
    <body>
      <canvas id="viewport" width="1400" height="800"></canvas>
      <script language="javascript" type="text/javascript">
		var sys = arbor.ParticleSystem({repulsion:400, stiffness:500,friction:.8, gravity:true});
		sys.parameters({gravity:true});
		sys.renderer = Renderer("#viewport");
	
		var servicetypes =  <? getData(); ?>
		
		for(i = 0; i < servicetypes.length; i++){
			var myservice = servicetypes[i];
			sys.addNode(myservice.description,{'label':myservice.description,'color':'grey'});
			for(j = 0; j < servicetypes[i].rates.length; j++){
				var myratename = servicetypes[i].rates[j].minCpv + ' to ' + servicetypes[i].rates[j].maxCpv;				
				sys.addNode(myratename,{'label':myratename,'color':'green'});
				sys.addEdge(myservice.description, myratename,{directed:true, color:'grey'});
				for(k = 0; k < servicetypes[i].rates[j].term.termRanges.length; k++){
					var mytermname = servicetypes[i].rates[j].term.termRanges[k].minMonths + ' months to ' + servicetypes[i].rates[j].term.termRanges[k].maxMonths + ' months';
					sys.addNode(mytermname,{'label':mytermname,'color':'blue'});
					sys.addEdge(myratename, mytermname,{directed:true, color:'blue'});
				}
			}
		}

      </script>

    </body>
</html>